<template>
    <view :class="'pop pop--' + type + ' ' + (show ? 'pop--show' : '')">
        <view v-if="overlay" :class="'pop__mask ' + (showOverlay ? '' : 'pop__mask--hide')" @tap="handleMaskClick"></view>
        <view class="pop__container">
            <slot></slot>
        </view>
    </view>
</template>

<script>
'use strict';

export default {
    data() {
        return {};
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        // 是否有遮罩层
        overlay: {
            type: Boolean,
            default: true
        },
        // 遮罩层是否会显示
        showOverlay: {
            type: Boolean,
            default: true
        },
        // 内容从哪个方向出，可选 center top bottom left right
        type: {
            type: String,
            default: 'center'
        }
    },
    methods: {
        handleMaskClick: function handleMaskClick() {
            this.$emit('clickmask', {
                detail: {}
            });
        }
    }
};
</script>
<style lang="scss">
.pop {
    visibility: hidden;
}
.pop--show {
    visibility: visible;
}
.pop__mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 14;
    background: rgba(0, 0, 0, 0.5);
    display: none;
}
.pop__mask--hide {
    background: 0 0;
}
.pop__container {
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    z-index: 15;
    opacity: 0;
}
.pop--show .pop__container {
    opacity: 1;
}
.pop--show .pop__mask {
    display: block;
}
.pop--left .pop__container {
    left: 0;
    top: 50%;
    -webkit-transform: translate3d(-100%, -50%, 0);
    transform: translate3d(-100%, -50%, 0);
}
.pop--show.pop--left .pop__container {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
}
.pop--right .pop__container {
    right: 0;
    top: 50%;
    left: auto;
    -webkit-transform: translate3d(100%, -50%, 0);
    transform: translate3d(100%, -50%, 0);
}
.pop--show.pop--right .pop__container {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
}
.pop--bottom .pop__container {
    top: auto;
    left: 50%;
    bottom: 0;
    -webkit-transform: translate3d(-50%, 100%, 0);
    transform: translate3d(-50%, 100%, 0);
}
.pop--show.pop--bottom .pop__container {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
}
.pop--top .pop__container {
    top: 0;
    left: 50%;
    -webkit-transform: translate3d(-50%, -100%, 0);
    transform: translate3d(-50%, -100%, 0);
}
.pop--show.pop--top .pop__container {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
}
</style>
